import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { Checkmark16 as CheckIcon } from '@carbon/icons-react';
import Group from './Group';
import s from './style.module.css';

function RadioButton({
	className,
	borderless,
	children,
	checked,
	value,
	onChecked,
}) {
	return (
		<div
			className={cn(className, s.radioButton, {
				[s.checked]: checked,
				[s.borderless]: borderless,
			})}
		>
			<div className={cn(s.origin)} onClick={() => onChecked(value)}>
				<div className={s.circle}>
					<CheckIcon className={s.center} />
				</div>
				<span>{children}</span>
			</div>
		</div>
	);
}

RadioButton.propTypes = {
	className: PropTypes.string,
	borderless: PropTypes.bool,
	children: PropTypes.node,
	checked: PropTypes.bool,
	value: PropTypes.string,
	onChecked: PropTypes.func,
};
RadioButton.defaultProps = {
	className: '',
	borderless: false,
	checked: false,
	handleChecked: () => {},
	onChecked: () => {},
};

export default RadioButton;

export { Group };
